7th STREET Asso de Parkour

7th Street est un projet de création de site internet pour une association sportive de Parkour, située à Bourges. C'est donc un projet fictif réalisé dans le cadre de ma formation de concepteur designer d'interface utilisateur (UX/UI).

Création du Logo

Pour le logo, le client (fictif) nous a demandé d'y représenter une figure féline qui rappellerait la rapidité, la furtivité et la souplesse de ces animaux; mais surtout de faire ressortir un côté urbain qui se rapporterait au terrain de jeu des traceurs: La ville.

On a donc fait plusieurs propositions de logo, que l'on a réalisé sur Illustrator.

*Pour l'étape de la création de logo, la recherche et la création s'est faite en groupe de 3, le reste, sauf mention contraire, est le fruit
d'un travail individuel.

Le Logo retenu

Le logo retenu est un mélange de plusieurs éléments des logos proposés précédemment. Le client a préféré garder l'association de couleur Jaune et Noir.

On a donc gardé l'idée du chat noir, qui regarde vers la droite (vers l'avant), le "7" de 7th Street représente un building pour le coté Urbain et la font MonsterMash pour son côté "sauvage" (un peu déchiré).

Animations du Logo

Gif créé sur Photoshop

Animation réalisée sur After Effects

Public visé

Pour son coeur de cible, le client nous a dit qu'il visait en priorité les jeunes des quartiers défavorisés, pour qu'ils puissent pratiquer une activité sportive dans les rues de leur quartier dans le but de se dépenser mais aussi de partager une passion commune pour le parkour avec de nouvelles personnes. J'ai donc réalisé le profil d'un potentiel adhérent sur une fiche persona.

J'ai produit ce document sur InDesign.

Ambiance générale du site web

Pour définir l'ambiance globale qu'aura le site, j'ai réalisé deux documents sur InDesign. Un moodboard et un styletile pour l'aspect visuel. On peut donc retrouver sur ces documents le type d'images qui sera utilisé, les polices, les couleurs, les différents Header, l'animation des boutons ou des images...

Le Moodboard

Un des critères que le client a donné pour l'aspect général de son site c'est qu'il voulait une mise en page dans un style structuré/déstructuré. J'ai donc fait ressortir cet aspect recherché, tout en donnant du dynamisme dans la composition des différents visuels choisis pour le moodboard.

Le Styletile

Le styletile permet de voir l'aspect global qu'aura l'interface du site, avec les fonts utilisées, la référence des couleurs...

L'arborescence

Pour son site internet, le client voulait, une page d'accueil, une page présentant l'association, une page qui parlerait de son local nommé "La Factory", 3 pages qui présenteraient les différents parkours selon les niveaux des traceurs (débutants, intermédiaires, experts), une page pour l'adhésion, une pour les actus (avec des articles), un shop et pour finir, une page contact.

J'ai donc pu construire l'arborescence du site sur Illustrator, en faisant en sorte de bien respecter la règle des 3 clics, c'est dire que l'utilisateur doit avoir accès à une information sur le site internet en moins de 3 clics.

Création de 3 set d'icônes pour le site

Icônes réassurance: Avantages

Icônes réassurances: Services

Icônes de Réseaux Sociaux

Maquettes

Après avoir créé et récupéré de la matière première pour alimenter le site, je suis passée à la création de 2 maquettes différentes, afin de donner au client le choix de choisir celle qu'il préfère et quels éléments il veut garder ou non.

La maquette en Light Mode a été réalisée sur Photoshop et celle en Dark Mode sur Illustrator.

Visite du site internet

Création du site 7th Street sur le CMS Wordpress, avec le builder Elementor.

J'ai donc repris tous ce que le client avait demandé sur l'aspect que devait avoir le site:

- Utilisation des couleurs et des polices de la charte graphique

- Dynamique

- Sturcturé/déstructuré

Autres Réalisations

Article pour l'Actu

Après la création d'un site internet, il est important de continuer à alimenter ce site, pour "fidéliser" les utilisateurs, et leur montrer que l'on est toujours présent et actif.

Pour cela on peut donc publier des articles sur notre site, des vidéos sur nos réseaux sociaux, pour plus de contenu !

Voici donc un exemple parmi tant d'autres d'articles que l'on peut retrouver sur le blog d'un site internet. Je l'ai rédigé et mis en page sur InDesign.

Réalisations Print

Pour promouvoir l'association, le client a demandé la création d'une affiche pour annoncer une journée portes ouvertes. Il voulait une affiche qui parle du parkour mais un visuel plutôt subtil sur ce sujet, pour piquer la curiosité des personnes ne connaissant pas ce sport, et ainsi les inciter à se rendre aux portes ouvertes pour plus de renseignements. De plus le client tenait à faire figurer sur l'affiche le coté félin du chat, mascotte de l'association.

Pour réaliser cette affiche, j'ai utilisé Photoshop, ainsi que pour le Gif qui montre rapidement les différentes étapes de sa création.

Vidéo PROMO

Pour promouvoir le parkour et l'association 7th Street, j'ai pu réaliser une petite vidéo. On peut y retrouver l'esprit de l'association et ses valeurs.

J'ai monté cette vidéo sur Premier Pro, et réalisé certains des passages sur After Effects

Cartes de voeux

Pour ce projet, nous avons dû créer deux cartes de voeux différentes pour l'année 2022, que l'association enverrait à ses adhérents ou à des prospects.

Ces cartes de voeux ont toutes deux été réalisées sur Illustrator.